<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Shop Vite 数据大屏</title>
  <link rel="stylesheet" href="./css/data-screen.css">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2878668_urpiiop5rn.css">
</head>
<body>
  <div class="data-screen">
    <!-- 头部 -->
    <header class="header">
      <div class="home-btn">
        <i class="icon-home"></i>
      </div>
      <h1 class="title">Vue Shop Vite 数据大屏</h1>
      <div class="setting-btn" id="fullscreenBtn">
        <i class="iconfont icon-fullscreen"></i>
      </div>
    </header>

    <!-- 内容区域 -->
    <main class="content">
      <!-- 左侧面板 -->
      <section class="left-panel">
        <!-- 数据聚合 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            <span>数据聚合</span>
          </div>
          <div class="data-list">
            <div class="data-item">
              <span class="label">访问数量</span>
              <span class="value">1210</span>
              <div class="progress-bar">
                <div class="bar" style="width: 80%"></div>
              </div>
            </div>
            <div class="data-item">
              <span class="label">订单数量</span>
              <span class="value">976</span>
              <div class="progress-bar">
                <div class="bar" style="width: 65%"></div>
              </div>
            </div>
            <div class="data-item">
              <span class="label">GPT模型数量</span>
              <span class="value">851</span>
              <div class="progress-bar">
                <div class="bar" style="width: 50%"></div>
              </div>
            </div>
            <div class="data-item">
              <span class="label">Claude模型数</span>
              <span class="value">154</span>
              <div class="progress-bar">
                <div class="bar" style="width: 30%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 人群画像 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            人群画像
          </div>
          <div id="pieChart" class="chart"></div>
        </div>

        <!-- 添加人员分布模块 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            <span>人员分布</span>
          </div>
          <div class="user-list">
            <div class="user-item">
              <img src="./images/avatar.png" class="avatar" alt="avatar">
              <div class="user-info">
                <span class="name">Tom</span>
                <span class="address">No. 189, Grove St, Los Angeles</span>
              </div>
            </div>
            <div class="user-item">
              <img src="./images/avatar.png" class="avatar" alt="avatar">
              <div class="user-info">
                <span class="name">Tom</span>
                <span class="address">No. 189, Grove St, Los Angeles</span>
              </div>
            </div>
            <div class="user-item">
              <img src="./images/avatar.png" class="avatar" alt="avatar">
              <div class="user-info">
                <span class="name">Tom</span>
                <span class="address">No. 189, Grove St, Los Angeles</span>
              </div>
            </div>
            <div class="user-item">
              <img src="./images/avatar.png" class="avatar" alt="avatar">
              <div class="user-info">
                <span class="name">Tom</span>
                <span class="address">No. 189, Grove St, Los Angeles</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 中间面板 -->
      <section class="center-panel">
        <!-- 地图区域 -->
        <div class="map-wrapper">
          <div class="map-fullscreen-btn" id="mapFullscreenBtn">
            <i class="iconfont icon-fullscreen"></i>
          </div>
          <div id="chinaMap" class="chart"></div>
        </div>
        <!-- 数据统计 -->
        <div class="statistics">
          <div class="stat-item">
            <div class="number" data-value="2075">2075</div>
            <div class="label">累计访问量</div>
          </div>
          <div class="stat-item">
            <div class="number">1356</div>
            <div class="label">累计用户数</div>
          </div>
          <div class="stat-item">
            <div class="number">1599</div>
            <div class="label">累计产品数</div>
          </div>
          <div class="stat-item">
            <div class="number">2278</div>
            <div class="label">累计模板数</div>
          </div>
        </div>
      </section>

      <!-- 右侧面板 -->
      <section class="right-panel">
        <!-- 数据散点 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            数据散点
          </div>
          <div id="scatterChart" class="chart"></div>
        </div>

        <!-- 销售额 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            销售额
          </div>
          <div id="salesChart" class="chart"></div>
        </div>

        <!-- 访问量 -->
        <div class="panel">
          <div class="panel-header">
            <i class="line"></i>
            访问量
          </div>
          <div id="visitsChart" class="chart"></div>
        </div>
      </section>
    </main>
  </div>

  <script src="./js/data-screen.js"></script>
</body>
</html> 
